<template>

  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>营销管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程秒杀</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">新建秒杀活动</h3>
    </el-card>

    <el-card style="margin-top: 30px">
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addUserFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="折扣名称" prop="name" placeholder="请输入活动名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>

        <el-form-item label="适用日期" placeholder="请选择适用日期" >
          <div class="block">
            <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>

        </el-form-item>
        <el-form-item label="秒杀说明" prop="introduce" placeholder="请输入秒杀名称">
          <el-input v-model="addForm.introduce"></el-input>
        </el-form-item>





      </el-form>


    </el-card>
    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
        秒杀课程列表
        <el-button type="primary" style="float: right" size="mini" @click="showAdd">新增商品</el-button>
      </h3>

<!--      新增过来的表格-->
      <el-table :data="addList"  border stripe>
        <el-table-column type="index"></el-table-column>

        <el-table-column
            prop="coursename"
            label="课程名称"
            width="160">
        </el-table-column>
        <el-table-column
            prop="coursecover"
            label="课程封面"
            width="180">
          <!--          <template slot-scope="scope">-->
          <!--            <img :src="nginxUrl+scope.row.empImg" style="width: 50px;height: 50px;border-radius: 50%" />-->
          <!--          </template>-->
        </el-table-column>
        <el-table-column
            prop="courseprice"
            label="课程价格"
            width="100">
        </el-table-column>
        <el-table-column
            prop="coursesubscription"
            label="课程订阅量"
            width="130">
        </el-table-column>
        <el-table-column
            prop="coursestatus"
            label="课程状态"
            width="130">
          <template slot-scope="scope">
            <span v-text="scope.row.coursestatus ==1 ?'上架':'下架'"></span>
          </template>
        </el-table-column>
        <el-table-column
            prop="inserttime"
            label="上架时间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="type.typename"
            label="分类"
            width="130">
        </el-table-column>
        <el-table-column label="课程秒杀价">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
      <el-table-column label="课程秒杀库存">
        <template slot-scope="scope">
          <el-input v-model="scope.row.stock"></el-input>
        </template>
      </el-table-column>
      </el-table>

      <el-button type="primary" @click="doAdd">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </el-card>



<!-- 隐藏的模态框   -->
    <el-dialog title="选择商品" :visible.sync="addDialogVisible" width="70%">
      <el-card style="margin-top: 20px">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="课程名称：">
            <el-input v-model="name" placeholder="请输入搜素课程名称"></el-input>
          </el-form-item>
          <el-form-item label="课程分类">
            <el-select v-model="tid" placeholder="请选择课程分类">
              <el-option label="请选择部门" value="0"></el-option>
              <el-option v-for="d in courseTypeList" :label="d.typename" :value="d.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程状态：">
            <el-select v-model="courseStatus" placeholder="请选择课程状态">
              <el-option label="请选择课程状态" value="0"></el-option>
              <el-option label="上架中" value="1"></el-option>
              <el-option label="下架中" value="2"></el-option>
              <el-option label="待上架" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="searchCourse">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.prevent="resetBox">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card style="margin-top: 30px">

        <el-table :data="courseList" @selection-change="idChance"  border stripe>

          <el-table-column type="selection" width="60">

          </el-table-column>
          <el-table-column
              prop="coursename"
              label="课程名称"
              width="160">
          </el-table-column>
          <el-table-column
              prop="coursecover"
              label="课程封面"
              width="180">
                      <template slot-scope="scope">
                       <img :src="nginxUrl+scope.row.coursecover" style="width: 50px;height: 50px;border-radius: 50%" />
                     </template>
          </el-table-column>
          <el-table-column
              prop="courseprice"
              label="课程价格"
              width="100">
          </el-table-column>
          <el-table-column
              prop="coursesubscription"
              label="课程订阅量"
              width="130">
          </el-table-column>
          <el-table-column
              prop="coursestatus"
              label="课程状态"
              width="130">
            <template slot-scope="scope">
              <span v-text="scope.row.coursestatus ==1 ?'上架':'下架'"></span>
            </template>
          </el-table-column>
          <el-table-column
              prop="inserttime"
              label="上架时间"
              width="180">
          </el-table-column>
          <el-table-column
              prop="type.typename"
              label="分类"
              width="130">
          </el-table-column>

        </el-table>

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>

      </el-card>
      <el-button type="primary" @click="doAdd0">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </el-dialog>



  </div>
</template>

<script>
export default {
  data(){
    return{
      pageNum: 1,
      pageSize: 10,
      name:'',
      tid:'',
      courseStatus:'',
      total: 0,
      courseList:[],
      courseTypeList:[],
      addForm: {

        list:[]
      },
      addFormRules: {


      },
      value1: [],
      readyList:[],
      addList:[],
      nginxUrl:this.$MyUrl.imgUrl + "course/",
      addDialogVisible:false,
      ids:[],
    }
  },
  methods:{

    cancelAdd(){
      this.addDialogVisible = false;
    },
    idChance(selection){
      this.readyList =[];
      for(let o of selection){
        this.readyList.push(o);
      }
    },
    doAdd0(){
      this.addList = this.readyList;
      this.addList.forEach(((value, index) => {
        value.typeName = value.type.typeName;
        console.log(value);
      }))
      this.addDialogVisible = false;
    },

    searchCourse() {
      this.pageNum = 1;
      this.getCourseList();
    },
    resetBox(){
      this.name="";
      this.tid="";
      this.courseStatus ="";
      this.getCourseList();
    },

    showAdd(){
      this.addDialogVisible = true;




    },
    doAdd(){
      this.addForm.starttime = this.value1[0];
      this.addForm.endtime = this.value1[1];
      this.addForm.list = this.addList;
      console.log(this.addForm);

      let url = "seckill/add";
      this.$axios.post(url,this.addForm).then(res=>{
        if (res.data.code == 200) {

          this.addForm = {};
          this.value1 = [];
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.$router.push("/Seckill");
        }else{
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })

    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.reloadData();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.reloadData();
    },

    //查询课程
    getCourseList() {
      let url = "course/clist";
      this.$axios.get(url, {
        params: {
          name:this.name,
          now: this.pageNum,
          size: this.pageSize,
          tid:this.tid
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.courseList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;


        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });
    },
    //查询分类
    getCourseTypeList() {
      let url = "course/typelist";
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.courseTypeList = res.data.data;
          console.log(res.data.msg)
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },
    reloadData() {
      this.searchCourse();
      this.getCourseTypeList();

    }
  },
  created() {
    this.reloadData();
  }
}
</script>

<style scoped>

</style>